<template>
<div class="app-container">
  <div style="margin-top: 1px">
    <el-row>
      <el-col span = '18'>
        <el-form :model="listQuery" inline size="small" label-width="80px" >
          <el-form-item label="关键词:">
            <el-input style="width: 150px;" v-model="listQuery.keyword" placeholder="输入关键词"></el-input>
          </el-form-item>
          <el-button
            type="primary"
            size="small"
            @click="handleSearch"
          >
            搜索
          </el-button>
        </el-form>
      </el-col>
    </el-row>
  </div>


  <div class="table-container">
    <el-table ref="studentTable"
              :data="list"
              style="width: 100%"
              v-loading="listLoading"
    >
      <el-table-column label="需求"  align="center" min-width="15%">
        <template slot-scope="scope">
          <p>{{scope.row.requestName}}</p>
        </template>
      </el-table-column>
      <!--                这里需要根据typeid显示对应的类型名字，完成后将该注释进行删除-->
      <el-table-column label="需求类型" align="center" min-width="10%">
        <template slot-scope="scope">
          {{ scope.row.typeId === 1 ? '电子产品':'生活用品'}}
        </template>
      </el-table-column>

      <el-table-column label="需求描述"  align="center" min-width="35%">
        <template slot-scope="scope">
          {{scope.row.description}}
        </template>
      </el-table-column>

      <el-table-column label="预估价格"  align="center" min-width="10%">
        <template slot-scope="scope">
          {{scope.row.price}}
        </template>
      </el-table-column>

      <el-table-column label="是否完成"  align="center" min-width="10%">
        <template slot-scope="scope">
          {{scope.row.isSupplied === false ?'尚未完成':'已完成'}}
        </template>
      </el-table-column>

      <el-table-column label="操作"  align="center" min-width="20%">
        <template slot-scope="scope">
          <el-tooltip :enterable = false class="item" effect="light" content="编辑" placement="top">
            <el-button
              size="mini"
              icon = "el-icon-edit-outline"
              @click="handleUpdateProduct(scope.$index, scope.row)"
              circle>
            </el-button>
          </el-tooltip>

          <el-tooltip :enterable = false class="item" effect="light" content="删除" placement="top">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              icon = "el-icon-delete"
              circle>
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>

    </el-table>
  </div>
</div>


</template>

<!--TODO: 完善需求管理页面(添加、修改需求以弹窗展现) -->

<script>
import {
  getStudentList,
  updateDeleteStatus,
  getGroupList,
  updateStudent,
  uploadExcel,
  createStudent,
  getDefaultTerm, fetchAllTerms, searchStudent, getRequestList
} from '../../../api/admin'
const defaultListQuery = {
  keyword: null,
  type: -1,
  pageNum: 1,
  pageSize: 10,
};
const defaultEditStuInfo = {
  requestId: null,
  studentId:null,
  dialogVisible: false,
  requestName: null,
  typeId:null,
  description: null,
  price: null,
  isSupplied: null
};
export default {
  name: "requestList",
  data(){
    return {
      editStuInfo: defaultEditStuInfo,
      queryModel: {keyword: null},
      list: null,
      listLoading: null,
      operateType: null,
      operateTypeDialog: 'modify', // 创建，修改 modify, create
      operates: [
        {
          label: '删除',
          value: 'delete'
        }
      ],
      listQuery: Object.assign({}, defaultListQuery),
      total: null,
      multipleSelection: [],
      modifyRowIndex: null,
      terms:[],
      uploadFile: null,
    }
  },
  created() {
    this.getList();
  },
  methods:{
    getList() {
      this.listLoading = 1;
      getRequestList(this.listQuery).then((resp) => {
        this.listLoading = false;
        this.list = resp.data.list;
      });
    },
  }
}
</script>

<style scoped>

</style>
